<template>
  <div>
    <div style="margin-bottom: 5px; margin-top: 0px">
      <el-button type="warning" size="small" @click="returnPreviousPage"
        >返回上一页</el-button
      >
    </div>
    <div id="container1">
      <div style="margin-top: 0px; margin-left: 20px">
        <el-divider></el-divider>
        <el-descriptions title="用户信息">
          <el-descriptions-item label="手机号码">{{
            customerDetail.phone
          }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{
            customerDetail.cname
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            customerDetail.sex
          }}</el-descriptions-item>
          <el-descriptions-item label="用户类型">
            {{ customerDetail.totalmoney | filterTotalmoney }}
          </el-descriptions-item>
          <el-descriptions-item label="注册时间">{{
            customerDetail.regtime
          }}</el-descriptions-item>

          <el-descriptions-item label="累计消费（元）">{{
            customerDetail.totalmoney
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div id="container2">
      <div style="width: 98%; margin: 5px auto; text-align: left">
        <el-button type="primary" @click="exportTeacherInfo" size="small"
          >导出报表</el-button
        >
      </div>
      <div style="width: 98%; margin: 10px auto; text-align: left">
        <div style="float: left; margin-right: 10px">
          <i class="el-icon-s-custom"></i>
        </div>
        <div>
          <h3>总订单数：{{pageInfo.total}}</h3>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="pageInfo.list"
        tooltip-effect="dark"
        style="width: 100%"
        stripe="true"
      >
        <el-table-column label="订单号" prop="onum" align="center">
        </el-table-column>
        <el-table-column prop="tbHospital.hname" label="所属医院" align="center">
        </el-table-column>
        <el-table-column prop="tbDepartment.dname" label="所属科室" align="center">
        </el-table-column>
        <el-table-column prop="actualpay" label="实际支付(元)" align="center">
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" align="center">
          
        </el-table-column>
        <!-- <el-table-column prop="address" label="订单总数"  align="center">
        </el-table-column> -->
        <el-table-column prop="payTime" label="支付时间" align="center">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
#container1 {
  width: 95%;
  height: 200px;
  margin: auto;
  border: #cfcccc solid 1px;
  background-color: white;
  text-align: center;
}
#container2 {
  width: 95%;
  height: 580px;
  margin: auto;
  margin-top: 30px;
  border: #cfcccc solid 1px;
  background-color: white;
  text-align: center;
}
</style>
<script>
import { getCustomerDetail, getOrderList } from "@/api/customerDetail.js";
export default {
  data() {
    return {
      cid: 0,
      customerDetail: {
      },
      pageInfo: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  filters: {
    filterTotalmoney(val) {
      return val > 0 ? "老用户" : "新用户";
    },
  },
  methods: {
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageNum = 1;
      this.loadCustomerOrderList();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.loadCustomerOrderList();
    },
    returnPreviousPage() {
      this.$router.push("/Home/Customer");
    },
    loadCustomerDetail() {
      getCustomerDetail(this.cid).then((res) => {
        if (res.data.code == 200) {
          this.customerDetail = res.data.data;
        }
      });
    },
    loadCustomerOrderList() {
      var data = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        cid: this.cid,
      };
      getOrderList(data).then((res) => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data;
        }
      });
    },
  },
  mounted() {
    this.cid = this.$route.query.cid;
    this.loadCustomerDetail();
    this.loadCustomerOrderList();
  },
};
</script>